<template>
	<view class="container">
		<!-- 头部信息 -->
		<view class="header">
			<view class="header-title">碳环保值提现</view>
		</view>
		
		<!-- 可提现余额 -->
		<view class="balance-section">
			<view class="balance-card">
				<view class="balance-header">
					<text class="balance-icon">$</text>
					<text class="balance-label">可提现余额</text>
				</view>
				<view class="balance-value">{{ getAvailableValue() }}</view>
				<view class="balance-unit">点</view>
				<view class="balance-equivalent">≈ ¥{{ getBalanceEquivalent() }}</view>
				<view class="exchange-rate">汇率: 100点 = ¥1</view>
			</view>
		</view>
		
		<!-- 申请提现按钮 -->
		<view class="apply-section">
			<button class="apply-btn" @click="showWithdrawModal">
				申请提现
			</button>
		</view>
		
		<!-- 提现记录 -->
		<view class="records-section">
			<view class="records-header">
				<text class="records-icon">🕐</text>
				<text class="records-title">提现记录</text>
			</view>
			<view class="records-list">
				<view class="record-item" v-for="(record, index) in safeWithdrawRecords" :key="index">
					<view class="record-icon">$</view>
					<view class="record-amount">¥{{ record.amount }}</view>
					<view class="record-status" :class="record.status">{{ record.statusText }}</view>
					<view class="record-date">{{ record.date }}</view>
					<view class="record-points">-{{ record.points }}点</view>
				</view>
			</view>
		</view>
		
		<!-- 提现模态框 -->
		<view class="modal-overlay" v-if="showWithdraw" @click="hideWithdrawModal">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<text class="modal-title">申请提现</text>
					<text class="modal-close" @click="hideWithdrawModal">×</text>
				</view>
				<view class="modal-body">
					<view class="withdraw-info">
						<view class="info-item">
							<text class="info-label">可提现碳环保值</text>
							<text class="info-value">{{ getAvailableValue() }} 点</text>
						</view>
						<view class="info-item">
							<text class="info-label">兑换比例</text>
							<text class="info-value">100点 = ¥1</text>
						</view>
					</view>
					<view class="withdraw-input">
						<text class="input-label">提现金额 (元)</text>
						<input 
							class="amount-input" 
							type="number" 
							v-model="withdrawAmount"
							placeholder="请输入提现金额"
							@input="calculateCarbonValue"
						/>
						<text class="carbon-equivalent">约 {{ carbonEquivalent }} 点</text>
					</view>
				</view>
				<view class="modal-footer">
					<button class="btn-cancel" @click="hideWithdrawModal">取消</button>
					<button class="btn-confirm" @click="confirmWithdraw" :disabled="!canWithdraw">确认提现</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			showWithdraw: false,
			showGain: false,
			showUsage: false,
			withdrawAmount: '',
			exchangeRate: 0.01, // 100点 = ¥1
			carbonData: {
				totalValue: 24500,
				monthlyGain: 2800,
				totalReduction: 15600,
				availableValue: 24500
			},
			carbonSources: [
				{
					icon: '♻️',
					name: '垃圾分类',
					value: '15',
					description: '每次分类回收'
				},
				{
					icon: '🚶',
					name: '步行出行',
					value: '8',
					description: '每公里步行'
				},
				{
					icon: '🚲',
					name: '骑行出行',
					value: '6',
					description: '每公里骑行'
				},
				{
					icon: '🌱',
					name: '植树造林',
					value: '25',
					description: '每棵树苗'
				}
			],
			recentActivities: [
				{
					icon: '♻️',
					title: '垃圾分类回收',
					description: '回收了3kg可回收物',
					time: '2小时前',
					value: '15',
					type: 'gain'
				},
				{
					icon: '💰',
					title: '碳环保提现',
					description: '提现了50元',
					time: '1天前',
					value: '100',
					type: 'usage'
				},
				{
					icon: '🚶',
					title: '步行出行',
					description: '步行了2公里',
					time: '2天前',
					value: '16',
					type: 'gain'
				}
			],
			gainRecords: [
				{
					icon: '♻️',
					title: '垃圾分类回收',
					description: '回收了5kg可回收物',
					time: '2024-01-15 14:30',
					value: '25'
				},
				{
					icon: '🚶',
					title: '步行出行',
					description: '步行了3公里',
					time: '2024-01-14 09:15',
					value: '24'
				},
				{
					icon: '🌱',
					title: '植树造林',
					description: '种植了2棵树苗',
					time: '2024-01-12 16:20',
					value: '50'
				}
			],
			usageRecords: [
				{
					icon: '💰',
					title: '碳环保提现',
					description: '提现了100元',
					time: '2024-01-10 11:45',
					value: '200'
				},
				{
					icon: '🎁',
					title: '兑换礼品',
					description: '兑换了环保水杯',
					time: '2024-01-08 15:30',
					value: '50'
				}
			],
			showRecords: false,
			withdrawRecords: [
				{
					amount: '5.00',
					status: 'completed',
					statusText: '已完成',
					date: '2024-01-15',
					points: '500'
				},
				{
					amount: '3.20',
					status: 'pending',
					statusText: '处理中',
					date: '2024-01-10',
					points: '320'
				},
				{
					amount: '8.50',
					status: 'completed',
					statusText: '已完成',
					date: '2024-01-05',
					points: '850'
				}
			]
		}
	},
	computed: {
		carbonEquivalent() {
			if (!this.withdrawAmount) return '0';
			const amount = parseFloat(this.withdrawAmount);
			return (amount / this.exchangeRate).toFixed(0);
		},
		canWithdraw() {
			const amount = parseFloat(this.withdrawAmount);
			return amount >= 0.5 && amount <= (this.getAvailableValue() * this.exchangeRate);
		},
		safeWithdrawRecords() {
			return this.withdrawRecords || [];
		}
	},
	mounted() {
		// 确保数据正确初始化
		if (!this.withdrawRecords) {
			this.withdrawRecords = [];
		}
	},
	methods: {
		showWithdrawModal() {
			this.showWithdraw = true;
		},
		
		hideWithdrawModal() {
			this.showWithdraw = false;
			this.withdrawAmount = '';
		},
		
		showGainModal() {
			this.showGain = true;
		},
		
		hideGainModal() {
			this.showGain = false;
		},
		
		showUsageModal() {
			this.showUsage = true;
		},
		
		hideUsageModal() {
			this.showUsage = false;
		},
		
		calculateCarbonValue() {
			// 实时计算碳环保值
		},
		
		confirmWithdraw() {
			if (!this.canWithdraw) {
				uni.showToast({
					title: '提现金额无效',
					icon: 'none'
				});
				return;
			}
			
			uni.showLoading({
				title: '提现处理中...'
			});
			
			setTimeout(() => {
				uni.hideLoading();
				uni.showToast({
					title: '提现成功',
					icon: 'success'
				});
				
				// 更新数据
				const pointsUsed = parseFloat(this.withdrawAmount) / this.exchangeRate;
				if (this.carbonData && this.carbonData.availableValue) {
					this.carbonData.availableValue -= pointsUsed;
				}
				if (this.carbonData && this.carbonData.totalValue) {
					this.carbonData.totalValue -= pointsUsed;
				}
				
				// 添加到提现记录
				this.withdrawRecords.unshift({
					amount: this.withdrawAmount,
					status: 'pending',
					statusText: '处理中',
					date: new Date().toLocaleDateString(),
					points: pointsUsed.toFixed(0)
				});
				
				this.withdrawAmount = '';
				
				// 隐藏提现模态框
				this.hideWithdrawModal();
			}, 1500);
		},

		showWithdrawRecords() {
			this.showRecords = true;
		},

		hideWithdrawRecords() {
			this.showRecords = false;
		},

		selectAmount(percentage) {
			const maxWithdrawable = this.getAvailableValue() * this.exchangeRate;
			const amount = (maxWithdrawable * percentage / 100).toFixed(2);
			this.withdrawAmount = amount;
		},
		
		getAvailableValue() {
			return this.carbonData && this.carbonData.availableValue ? this.carbonData.availableValue : 0;
		},
		
		getBalanceEquivalent() {
			const availableValue = this.getAvailableValue();
			return (availableValue * this.exchangeRate).toFixed(2);
		}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f8f9fa;
	padding-bottom: 120rpx;
}

/* 头部信息 */
.header {
	background: rgb(6, 181, 58);
	padding: 40rpx 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	border-bottom: 1rpx solid #f0f0f0;
	
	.header-title {
		font-size: 36rpx;
		font-weight: bold;
		color: white;
		text-align: center;
	}
}



/* 可提现余额 */
.balance-section {
	margin: 30rpx 40rpx;
	
	.balance-card {
		background: linear-gradient(135deg, #66BB6A, #42A5F5);
		border-radius: 24rpx;
		padding: 40rpx;
		text-align: center;
		box-shadow: 0 8rpx 24rpx rgba(102, 187, 106, 0.4);
		position: relative;
		overflow: hidden;
		color: white;
		margin-bottom: 20rpx;
		
		.balance-header {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20rpx;
			
			.balance-icon {
				font-size: 40rpx;
				margin-right: 15rpx;
				color: white;
			}
			
			.balance-label {
				font-size: 32rpx;
				color: white;
				font-weight: 600;
			}
		}
		
		.balance-value {
			font-size: 80rpx;
			font-weight: bold;
			color: white;
			margin-bottom: 10rpx;
			text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
		}
		
		.balance-unit {
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.9);
			margin-bottom: 30rpx;
		}
		
		.balance-equivalent {
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.9);
			margin-bottom: 20rpx;
		}
		
		.exchange-rate {
			font-size: 22rpx;
			color: rgba(255, 255, 255, 0.8);
		}
	}
}

/* 申请提现按钮 */
.apply-section {
	margin: 30rpx 40rpx;
	
	.apply-btn {
		background: #e0e0e0;
		color: #333;
		padding: 25rpx;
		border-radius: 16rpx;
		font-size: 28rpx;
		font-weight: 600;
		border: none;
		cursor: pointer;
		transition: all 0.3s ease;
		text-align: center;
		width: 100%;
		
		&:hover:not(:disabled) {
			background: #d0d0d0;
		}
		
		&:disabled {
			background: #ccc;
			cursor: not-allowed;
		}
	}
}

/* 提现记录 --> */
.records-section {
	margin: 30rpx 40rpx;
	
	.records-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		
		.records-icon {
			font-size: 40rpx;
			margin-right: 15rpx;
		}
		
		.records-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
	}
	
	.records-list {
		background: white;
		border-radius: 24rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
		position: relative;
		overflow: hidden;
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 6rpx;
			background: linear-gradient(90deg, #66BB6A, #A5D6A7);
		}
		
		.record-item {
			display: flex;
			align-items: center;
			padding: 25rpx 0;
			border-bottom: 1rpx solid #f5f5f5;
			
			&:last-child {
				border-bottom: none;
			}
			
			.record-icon {
				width: 60rpx;
				height: 60rpx;
				background: #66BB6A;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: white;
				font-size: 24rpx;
				font-weight: bold;
				margin-right: 20rpx;
			}
			
			.record-amount {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-right: 20rpx;
				min-width: 80rpx;
			}
			
			.record-status {
				font-size: 22rpx;
				color: #66BB6A;
				font-weight: 600;
				padding: 6rpx 12rpx;
				border-radius: 20rpx;
				background: rgba(102, 187, 106, 0.1);
				border: 1rpx solid #66BB6A;
				margin-right: 20rpx;
				min-width: 80rpx;
				text-align: center;
				
				&.pending {
					color: #FF9800;
					border-color: #FF9800;
					background: rgba(255, 152, 0, 0.1);
				}
				&.completed {
					color: #4CAF50;
					border-color: #4CAF50;
					background: rgba(76, 175, 80, 0.1);
				}
				&.failed {
					color: #FF6B6B;
					border-color: #FF6B6B;
					background: rgba(255, 107, 107, 0.1);
				}
			}
			
			.record-date {
				font-size: 24rpx;
				color: #999;
				margin-right: 20rpx;
				min-width: 120rpx;
			}
			
			.record-points {
				font-size: 28rpx;
				font-weight: bold;
				color: #FF6B6B;
				margin-left: auto;
			}
		}
	}
}

/* 提现规则 --> */
.rules-section {
	margin: 30rpx 40rpx;
	
			.rules-card {
			background: white;
			border-radius: 24rpx;
			padding: 40rpx;
			text-align: left;
		box-shadow: 0 8rpx 24rpx rgba(102, 187, 106, 0.15);
		position: relative;
		overflow: hidden;
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 6rpx;
			background: linear-gradient(90deg, #66BB6A, #A5D6A7);
		}
		
		.rules-header {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			margin-bottom: 20rpx;
			
			.rules-icon {
				font-size: 40rpx;
				margin-right: 15rpx;
			}
		}
		
		.rules-list {
			.rule-item {
				padding: 15rpx 0;
				border-bottom: 1rpx solid #f5f5f5;
				text-align: left;
				
				&:last-child {
					border-bottom: none;
				}
				
				.rule-text {
					font-size: 28rpx;
					color: #333;
					line-height: 1.6;
				}
			}
		}
	}
}

/* 提现金额输入 --> */
.amount-section {
	margin: 30rpx 40rpx;
	
			.amount-card {
			background: white;
			border-radius: 24rpx;
			padding: 40rpx;
			text-align: left;
		box-shadow: 0 8rpx 24rpx rgba(102, 187, 106, 0.15);
		position: relative;
		overflow: hidden;
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 6rpx;
			background: linear-gradient(90deg, #66BB6A, #A5D6A7);
		}
		
		.amount-label {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
			text-align: left;
		}
		
		.amount-input {
			width: 100%;
			padding: 25rpx;
			border: 2rpx solid #e9e9e9;
			border-radius: 16rpx;
			font-size: 32rpx;
			margin-bottom: 20rpx;
			transition: border-color 0.3s ease;
			text-align: center;
			
			&:focus {
				border-color: #66BB6A;
				outline: none;
			}
		}
		
		.amount-limits {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			font-size: 24rpx;
			color: #666;
			padding: 0 10rpx;
		}
		
		.quick-select {
			display: flex;
			justify-content: space-between;
			gap: 15rpx;
			
			.select-btn {
				flex: 1;
				padding: 20rpx 15rpx;
				border: 1rpx solid #66BB6A;
				border-radius: 12rpx;
				font-size: 26rpx;
				font-weight: 600;
				color: #66BB6A;
				background: white;
				cursor: pointer;
				transition: all 0.3s ease;
				
				&:hover:not(:disabled) {
					background: #66BB6A;
					color: white;
				}
				
				&:active {
					transform: scale(0.95);
				}
				
				&:disabled {
					border-color: #ccc;
					color: #ccc;
					cursor: not-allowed;
				}
			}
		}
	}
}

/* 确认提现按钮 --> */
.confirm-section {
	margin: 30rpx 40rpx;
	
	.confirm-btn {
		background: #e0e0e0;
		color: #666;
		padding: 25rpx;
		border-radius: 16rpx;
		font-size: 28rpx;
		font-weight: 600;
		border: none;
		cursor: pointer;
		transition: all 0.3s ease;
		text-align: center;
		width: 100%;
		
		&:hover:not(:disabled) {
			background: #d0d0d0;
		}
		
		&:disabled {
			background: #ccc;
			cursor: not-allowed;
		}
		
		&.btn-enabled {
			background: #66BB6A;
			color: white;
			
			&:hover {
				background: #4CAF50;
			}
		}
	}
}

/* 模态框样式 --> */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	
	.modal-content {
		background: white;
		border-radius: 24rpx;
		width: 90%;
		max-width: 600rpx;
		max-height: 80vh;
		overflow: hidden;
		
		.modal-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
			border-bottom: 1rpx solid #f5f5f5;
			
			.modal-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}
			
			.modal-close {
				font-size: 40rpx;
				color: #999;
				cursor: pointer;
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				transition: all 0.3s ease;
				
				&:hover {
					background: #f5f5f5;
					color: #666;
				}
			}
		}
		
		.modal-body {
			padding: 30rpx;
			max-height: 60vh;
			overflow-y: auto;
		}
		
		.modal-footer {
			display: flex;
			gap: 20rpx;
			padding: 30rpx;
			border-top: 1rpx solid #f5f5f5;
			
			button {
				flex: 1;
				padding: 25rpx;
				border-radius: 16rpx;
				font-size: 28rpx;
				font-weight: 600;
				border: none;
				cursor: pointer;
				transition: all 0.3s ease;
				
				&.btn-cancel {
					background: #f5f5f5;
					color: #666;
					
					&:hover {
						background: #e9e9e9;
					}
				}
				
				&.btn-confirm {
					background: #66BB6A;
					color: white;
					
					&:hover:not(:disabled) {
						background: #4CAF50;
					}
					
					&:disabled {
						background: #ccc;
						cursor: not-allowed;
					}
				}
			}
		}
	}
}

/* 提现信息样式 */
.withdraw-info {
	margin-bottom: 30rpx;
	
	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
		
		&:last-child {
			border-bottom: none;
		}
		
		.info-label {
			font-size: 28rpx;
			color: #666;
		}
		
		.info-value {
			font-size: 28rpx;
			font-weight: bold;
			color: #66BB6A;
		}
	}
}

.withdraw-input {
	.input-label {
		display: block;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 15rpx;
		font-weight: 600;
	}
	
	.amount-input {
		width: 100%;
		padding: 25rpx;
		border: 2rpx solid #e9e9e9;
		border-radius: 16rpx;
		font-size: 32rpx;
		margin-bottom: 15rpx;
		transition: border-color 0.3s ease;
		
		&:focus {
			border-color: #66BB6A;
			outline: none;
		}
	}
	
	.carbon-equivalent {
		display: block;
		font-size: 24rpx;
		color: #66BB6A;
		text-align: center;
	}
}

/* 记录列表样式 --> */
.record-list {
	.record-item {
		display: flex;
		align-items: center;
		padding: 25rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
		
		&:last-child {
			border-bottom: none;
		}
		
		.record-icon {
			font-size: 36rpx;
			margin-right: 20rpx;
		}
		
		.record-content {
			flex: 1;
			
			.record-title {
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 8rpx;
			}
			
			.record-desc {
				font-size: 24rpx;
				color: #666;
				margin-bottom: 8rpx;
			}
			
			.record-time {
				font-size: 22rpx;
				color: #999;
			}
		}
		
		.record-value {
			font-size: 28rpx;
			font-weight: bold;
			color: #66BB6A;
			
			&.usage {
				color: #FF6B6B;
			}
		}
	}
}
</style>
